<template>
  <div>
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-top">
        <el-select
          v-model="value"
          placeholder="请选择学段"
          @change="handleChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span style="margin-left: 30px">
          <label for="">按地区选择：</label>
          <el-select
            v-model="value1"
            placeholder="选择省份"
            @change="handleChange1"
            style="width:127px;"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select
            v-model="value2"
            placeholder="选择城市"
            @change="handleChange2"
            style="width:127px;"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select
            v-model="value3"
            placeholder="选择区县"
            @change="handleChange3"
            style="width:127px;"
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </span>
        <span style="margin-left: 30px">
          <label for="">按老师评分：</label>
          <el-select
            v-model="value4"
            placeholder="按老师评分"
            @change="handleChange4"
            style="width:127px;"
          >
            <el-option
              v-for="item in options4"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </span>
        <button class="yellow-btn" @click="handleShowDialog" v-if="showBtn">申请入驻</button>
      </div>
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">名师推荐</div>
          <div class="xyd-c-content clearfix">
            <ul>
              <li v-for="item,i in recommend" @click="$router.push('/teacher/'+item.user__id)">
                <div class="img-container">
                  <img :src="item.user__avatar"/>
                </div>
                <div class="text-container">
                  <div class="tc-t">
                    <span class="name">{{item.user__real_name}}</span>
                    <span class="score">{{item.teacher_score}}</span>
                  </div>
                  <div class="tc-b">
                    {{item.job_level}}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="page-right">
        <div class="content clearfix" v-loading.body="loading">
          <no-content v-if="!loading && (!list || list.length === 0)" ></no-content>
          <teacher-card :value="item" v-for="item,i in list" :key="i"></teacher-card>
        </div>
        <div class="pagination-container" style="width:100%;">
          <el-pagination
            v-if="list && list.length !== 0"
            :page-size="offset"
            layout="prev, pager, next"
            :total="total"
            @current-change="handlePageChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="申请入驻" top="20px" :visible.sync="dialogFormVisible">
      <el-steps :center="true" :align-center="true"  :space="230" :active="active" finish-status="success">
        <el-step title="完善基础信息"></el-step>
        <el-step title="身份认证"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <div v-if="active === 0">
        <el-form :model="form" style="padding: 60px 140px 0 140px;">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.username" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="请选择性别" style="width:100%">
              <el-option label="男" value="M"></el-option>
              <el-option label="女" value="W"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-date-picker
              style="width:100%;"
              v-model="form.birthday"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="最高学历" :label-width="formLabelWidth">
            <el-input v-model="form.education" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="毕业院校" :label-width="formLabelWidth">
            <el-input v-model="form.graduate_from" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="教龄" :label-width="formLabelWidth">
            <el-input v-model="form.job_age" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="现教阶段" :label-width="formLabelWidth">
            <el-select
              v-model="form.teach_section"
              placeholder="现教阶段"
              style="width:100%;"
            >
              <el-option
                v-for="item,i in options"
                :key="i"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教师职称" :label-width="formLabelWidth">
            <el-input v-model="form.job_level" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="任教机构" :label-width="formLabelWidth">
            <el-input v-model="form.school" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="教师简介" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.intro" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="dialogFormVisible = false">取 消</button>
          <button class="common-btn" @click="next">下一步</button>
        </div>
      </div>
      <div v-if="active === 1">
        <div class="progress2">
          <div class="title1">身份认证</div>
          <div class="org-example">
            <div class="img-container">
              <img :src="orgExample"/>
            </div>
            <div class="text">
              <div class="title">参照示例</div>
              <div class="content">
                1、免冠，建议使用素颜照，保证五官清晰可见<br/>
                2、照片放大后，证件上的文字信息和证件号清楚可见<br/>
                3、手持证件拍照，不要挡住证件上任何的信息<br/>
                4、大小不要超过5M<br/>
              </div>
            </div>
          </div>
          <div class="file-upload clearfix">
            <div class="left-title">营业执照认证：</div>
            <div class="right-content">
              <img :src="IDCard"/>
              <button class="common-btn" @click="handleUpload">点击上传</button>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="dialogFormVisible = false">取 消</button>
          <button class="yellow-btn" @click="active--">上一步</button>
          <button class="common-btn" @click="handleConfirm">提交申请</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getTeachers } from 'api/teacher'
import { editUser } from 'api/user'
import { getAddress } from 'api/common'
import { NoContent } from 'components/Sit'
import TeacherCard from 'views/components/teacherCard'
import orgExample from 'assets/common_images/org-example.png'
import IDCard from 'assets/common_images/IDcard_default.png'
import pick from 'utils/file/picker'
import moment from 'moment'

export default {
  name: 'Listen',
  components: {
    NavBar,
    TeacherCard,
    NoContent
  },
  computed: {
    showBtn: {
      get() {
        const { user } = this.$store.state
        if (user.uid && user.isteacher) {
          return false
        } else {
          return true
        }
      }
    }
  },
  data() {
    return {
      orgExample,
      IDCard,
      list: [],
      total: 0,
      page: 1,
      offset: 16,
      recommend: [],
      city: '',
      options: [
        { label: '小学', value: 0 },
        { label: '初中', value: 1 },
        { label: '高中', value: 2 },
        { label: '大学', value: 3 }
      ],
      options1: [],
      options2: [],
      options3: [],
      options4: [],
      props: {
        value: 'label',
        children: 'cities'
      },
      value: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      dialogFormVisible: false,
      formLabelWidth: '70px',
      form: {
        username: '',
        sex: '',
        birthday: '',
        graduate_from: '',
        teach_section: '',
        school: '',
        education: '',
        job_age: '',
        job_level: '',
        intro: ''
      },
      active: 0,
      loading: false
    }
  },
  created() {
    this.fetchAddress(1)
    this.loading = true
    getTeachers()
    .then(res => {
      console.log(res)
      this.loading = false
      this.list = res.data.teacher
      this.recommend = res.data.recommend
      this.total = res.data.page.last_page * this.offset
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    // 获取地址
    fetchAddress(num) {
      getAddress({
        city: this.city
      })
      .then(res => {
        this[`options${num}`] = res.city
      })
      .catch(err => console.log(err))
    },
    // 获取数据TODO
    fetchData() {
      getTeachers({
        city: this.city,
        section: this.value,
        page: this.page
      })
      .then(res => {
        console.log(res)
        this.list = res.data.teacher
        this.recommend = res.data.recommend
      })
      .catch(err => console.log(err))
    },
    // 
    handleChange(val) {
      this.fetchData()
    },
    // 选择省，获取市
    handleChange1(val) {
      this.city = val
      this.fetchAddress(2)
      this.fetchData()
    },
    // 选择市，获取区
    handleChange2(val) {
      this.city = val
      this.fetchAddress(3)
      this.fetchData()
    },
    // 选择区
    handleChange3(val) {
      this.city = val
      this.fetchData()
    },
    handleChange4(val) {

    },
    handlePageChange(page) {
      this.page = page
      this.fetchData()
    },
    // 展示弹框，要判断登录没有
    handleShowDialog() {
      if (this.$store.state.user.uid) {
        this.dialogFormVisible = true
      } else {
        this.$message({
          message: '请先登录',
          type: 'warning'
        })
      }
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    handleUpload() {
      pick()
      .then(file => {
        console.log(file)
        this.file = file
        this.IDCard = window.URL.createObjectURL(file)
      })
      .catch(err => console.log(err))
    },
    handleConfirm() {
      this.next()
      editUser({
        username: this.form.username,
        sex: this.form.sex,
        graduate_from: this.form.graduate_from,
        teach_section: this.form.teach_section,
        school: this.form.school,
        education: this.form.education,
        job_age: this.form.job_age,
        job_level: this.form.job_level,
        intro: this.form.intro,
        birthday: this.form.birthday ? moment(this.form.birthday).format('YYYY-MM-DD') : '',
        avatar: this.file ? this.file : this.form.avatar
      })
      .then(res => {
        console.log(res)
        this.$alert('恭喜您申请提交成功，请前往个人中心完善信息', '申请成功', {
          confirmButtonText: '现在去',
          callback: action => {
            if (action == 'confirm') {
              this.$router.push('/personal/teacher-info/individuation')
            }
          }
        });
      })
      .catch(err => console.log(err))
      this.next()
      this.dialogFormVisible = false
      setTimeout(() => this.next(), 0)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .page-main {
    .page-top{
      width: 1200px;
      margin: 0 auto;
      margin-bottom: 20px;
      .el-select{
        width: 210px;
      }
      .yellow-btn{
        width: 127px;
        float: right;
        margin-right: 20px;
        vertical-align: middle;
      }
    }
    .page-left {
      margin-right: 30px;
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 0 20px;
            >li{
              height: 80px;
              padding: 20px 0;
              border-bottom: 1px solid #e5e6e7;
              cursor: pointer;
              &:hover{
                .name{
                  color: #00A2EA;
                }
              }
              .img-container{
                display: inline-block;
                vertical-align: middle;
                width: 40px;
                height: 40px;
                overflow: hidden;
                border-radius: 20px;
                >img{
                  width: 40px;
                  height: 40px;
                }
              }
              .text-container{
                display: inline-block;
                vertical-align: middle;
                .tc-t{
                  .score{
                    color: #EF6401;
                  }
                }
                .tc-b{
                  color: #999;
                }
              }
            }
          }
        }
      }
    }
    .page-right {
      .content{
        margin: -10px;
        min-height: 270px;
      }
    }
  }
  .progress2{
    .title1{
      margin-top: 20px;
    }
    .org-example{
      background-color: #eee;
      padding: 30px;
      .img-container{
        display: inline-block;
        vertical-align: middle;
      }
      .text{
        display: inline-block;
        vertical-align: top;
        margin-left: 40px;
        .title{
          color: #333;
          font-size: 16px;
        }
        .content{
          color: #999;
        }
      }
    }
    .file-upload{
      margin: 20px 0;
      .left-title{
        float: left;
      }
      .right-content{
        float: left;
        width: 200px;
        >img,>button{
          width: 100%;
        }
      }
    }
  }
</style>

